<template>
    <Layout>
        <template slot="header" class="head-main">
            <Header @change="changeComponent" ref="head" style="height: 80px;"></Header>
        </template>

        <template slot="aside">
            <CuMenu
            @onActive="changeActive"
            ref="customMenu"
            style="width: 230px;"
            ></CuMenu>
        </template>

        <template slot="breadcrumb">
            <breadcrumb v-if="activeComponent!=='page'"></breadcrumb>
        </template>
        <template slot="body">
            <!--<keep-alive>-->
            <component :is="activeComponent" ref="module" :params="params" :key="activeComponent"/>
            <!--</keep-alive>-->
        </template>
    </Layout>
</template>
<script>
import Layout from '@/common/layout/default';
import Header from '@/common/header/Header';
import GroupHeader from '@/common/header/GroupHeader';
import Footer from '@/common/Footer';
import CuMenu from '@/common/menu/CuEMenu';
import breadcrumb from '@/common/breadcrumb/index';
import ComsUtil from '@/util/components';

import CustomPage from '@/common/CustomPageMin';
var c = Object.assign(
  {
    Header,
    GroupHeader,
    Footer,
    breadcrumb,
    CuMenu,
    Layout,
    CustomPage
  },
  ComsUtil.localRequire()
);
export default {
  components: c,
  data() {
    return {
      index: '',
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      ifUnReview: false,
      params: undefined,
      activeComponent: '',
    };
  },

  methods: {
    goHome() {
      this.$store.dispatch('setActiveMenuAsyn', ['page']);
    },
    changeActive(menu, params, from) {
      this.activeComponent = null;
      this.$nextTick(function() {
        this.activeComponent = menu.path;
        this.params = params;
      });
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.loadData()
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadData()
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {});
  },
};
</script>

<style scoped lang="less">

    .head-title {
        height: 80px;
        background-color: rgba(21,164,250,0.4);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 0 6px 0px #ffffff;
        .head-text{
            /*font-family: '华文行楷 Bold', '华文行楷 Regular', '华文行楷', sans-serif;*/
            color: #fff;
            font-style: normal;
            font-size: 30px;
            cursor: pointer;
            &:before{
                content: '';
                background-image: url("~@/assets/logo1.png");
                background-size: 100%;
                background-repeat: no-repeat;
                width: 45px;
                height: 45px;
                margin: 0 20px;
                display: inline-block;
                vertical-align: text-bottom;
            }
        }
        .alarm{
            margin-left: 35px;
            width: 15px;
            height: 15px;
            display: inline-block;
            background-image: url("~@/assets/sysalarm.png");
            background-size: contain;
            background-position: left center;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            &:after{
                position: absolute;
                height: 100%;
                width: 15px;
                left: 0;
                content: '';
                background: inherit;
                filter: drop-shadow(15px 0 0 #dd200a);
                transform: translateX(-30px);
            }
            &:hover{
                &:after{
                    transform: translateX(-15px);
                }
            }
        }
        .ifUnReview{
            cursor: pointer;
            &:after{
                transform: translateX(-15px);
                animation: alarm_twinkle 1s linear infinite;
                -webkit-animation: alarm_twinkle 1s linear infinite;
                -moz-animation: alarm_twinkle 1s linear infinite;
                -o-animation: alarm_twinkle 1s linear infinite;
            }
        }

        .have{
            transform: translateX(-15px);
        }
    }
</style>
